@import "../../scss/reset.scss";
@import "../../parts/inc/header.scss";
@import "../../parts/footer/footer.scss";
.product{
    width: 1200px;
    height: 780px;
    margin: 40px auto 0 auto;
    position: relative;
    overflow: hidden;
    .name{
            height: 14px;
            width: 100%;
            color: #757575;
            font-size: 12px;
            line-height: 14px;
            
    }
    .product_b{
        width: 100%;
        height: 100%;
        .album{
            width: 602px;
            height: 100%;
            float: left;
            .photo{
                width: 600px;
                height: 600px;
                border: 1px solid #ddd;
                overflow: hidden;
                position: relative;
                img{
                    width: 600px;
                    height: 600px;
                }
                .fangda{
                    display: inline-block;
                    background: url(../../images/base/fangdajing.png) center no-repeat;   
                    width: 21px;
                    height: 21px;
                    position: absolute;
                    bottom: 0;
                    right: 0;;
                }
                .fangda:hover{
                    background: url(../../images/base/fangda2.png) center no-repeat;
                }

            }
            .option{
                width: 100%;
                height: 106px;
                margin-top:15px ;
                position: relative;

                .shape{
                    width: 16px;
                    height: 100px;
                    background: green;
                    border-radius: 8px;
                    margin-top: 3px;
                    position: absolute;
                    top: 0;
                }
                .option_l:after{
                    content:"";
                        width: 0;
                        height: 0;
                        border-width: 8px;
                        border-style: solid;
                        border-color: transparent  red transparent transparent;
                        position: absolute;
                        top: 42px;
                        left: -3px;


                }
                .option_r:after{
                    content:"";
                        width: 0;
                        height: 0;
                        border-width: 8px;
                        border-style: solid;
                        border-color: transparent transparent transparent  red;
                        position: absolute;
                        top: 42px;
                        left: 3px;


                }
                .option_l{
                    left: 0;
                    position: relative;
                }
                .option_r{
                    right: 0;
                   
                }
                .option_c{
                    width: 560px;
                    height: 100%;
                    position: absolute;
                    left: 18px;
                    top: 0;

                    .simg{
                        width: 100px;
                        height: 100px;
                        border: 2px solid #ddd;
                        float: left;
                        margin: 0 3px;
                        cursor:pointer;
                      
                        img{
                            width: 100px;
                            height: 100px;
                        }
                    }
                    .border_r{
                        border: 2px solid red !important;
                        position: relative;
                    }
                    .border_r:after{
                        content:"";
                        width: 0;
                        height: 0;
                        border-width: 5px;
                        border-style: solid;
                        border-color:  transparent transparent red transparent;
                        position: absolute;
                        top: -12px;
                        left: 46px;
                    }
                }

            }

        }
        .explain{
           float:right;
           width: 540px;
           height: 100%;
            .font24{
                font-size: 24px;
                font-weight: 600;
            }
            .subclass{
                color: #8c8c8c;
                margin-top: 1rem;
                font-size: 16px;
            }
            .price{
                width: 490px;
                height: 45px;
                padding: 15px 25px 15px 25px;
                color: red;
                font-size: 30px;
                border-bottom: 1px solid #eeeeee;
                margin-top: 20px;
                background-color: #f7f7f7;
            }
            .delete{
                width: 490px;
                height: 25px;
                padding: 15px 25px ;
                font-size: 16px;
                color: #858585;
                border-bottom: 1px solid #eeeeee;
                background-color: #f7f7f7;
                span{
                    text-decoration:line-through;
                }
            }
            .vip{
                width: 490px;
                height: 30px;
                padding: 15px 25px;
                background-color: #f7f7f7;
                img{
                    display: inline-block;
                    float: left;
                    margin-right: 10px;
                }
                p{
                    float: left;
                    line-height: 30px;
                    
                }
                a:hover{
                    color: aquamarine !important;
                }
               

            }
            .xian{
                width: 540px;
                padding-bottom:5px ;    
                border-bottom: 1px dotted #ddd; 
            }
            .share{
                width: 540px;
                height: 50px;
                padding: 10px 0;
                img{
                    width: 32px;
                    height: 32px;
                }
                &>p{
                    float: left;
                    display: block;
                    background: #f5f5f5;
                    border: 1px solid #ddd;
                    width: 116px;
                    height: 26px;
                    font-size: inherit;
                    text-align: center;
                    line-height: 26px;
                    color: #767676;
                    margin-top: 11px;
                    cursor:pointer;

                }
                div{
                    float: right;
                    overflow: hidden;
                    margin-top: 7px;

                    p{
                        display: inline-block;
                        height: 16px;
                        font-size: 13px;
                        margin-bottom: 9px;
                        overflow: hidden;
                    }
                }
            }
            .colorBox{
                width: 540px;
                height: 105px;
                margin-bottom: 15px;
                p{
                    color: #c4c4c4;
                    width: 540px;
                    height: 28px;
                    font-size: 12px;
                    line-height: 28px;
                }

                .xbox{
                    width: 540px;
                    height: 80px;
                    margin-bottom: 15px;
                    overflow: hidden;
                    
                    .x1{
                        width: 66px;
                        height: 66px;
                        border: 2px solid #c4c4c4;
                        margin: 0px 10px 0 0;
                        float: left;
                        cursor:pointer;
                        img{
                            width: 66px;
                            height: 66px;
                        }
                    }
                    .redBorder{
                        border: 2px solid red !important;
                    }
                    
                }
                .x2{
                    display: block;
                    width: 70px;
                    height: 40px;
                    border: 2px solid red;
                    line-height: 40px;
                    text-align: center;
                    cursor:pointer;
                    
                }
            }
            .colorBoxs{
                height: 80px !important;
            }
            .number{
                width: 540px;
                height: 85px;
                margin-bottom: 15px;
                p{
                    color: #c4c4c4;
                    font-size: 14px;
                    margin-bottom: 5px;
                }
                .num_value{
                    width: 540px;
                    height: 50px;

                }
                .bor{
                    display: inline-block;
                    border: 1px solid #e8e8e8;
                    border-left:none; 
                    width: 48px;
                    height: 48px;
                    float: left;
                    line-height: 48px;
                    text-align: center;

                }
                .num_l{
                    border-left: 1px solid #e8e8e8 !important;
                    cursor:pointer;
                }
                .num_r{
                    cursor:pointer;
                }
            }
            .buy{
                width: 540px;
                height: 40px;
                span{
                    display: inline-block;
                    width: 120px;
                    height: 38px;
                    line-height: 38px;
                    text-align: center;   
                    font-size: 14px;      
                    cursor:pointer;          
                }
                .buya{
                    border: 1px solid #c4c4c4;
                    color: #333;
                    
                }
                .addcar{
                    background: red;
                    color: white;
                }
            }



        }

    }
}
.commodity{
    width: 100%;
    height: 20px;
    padding: 30px 0;
    border-bottom: 1px solid #e8e8e8;
    a{
        display: block;
        padding: 0 45px;
        border-right: 1px solid #e8e8e8;
        border-left: 1px solid #e8e8e8;
        font-size: 14px;
        width: 150px;
        margin: 0 auto;
        text-align: center;
        line-height: 20px;
        

    }

}
.photo{
    width: 790px;
    margin: 0 auto;
    

}
